<template>
  <view :class="'audio-message ' + (isMine ? 'my-audio' : '')">
    <image class="audio-icon" src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/audio-msg.png"></image>
    <view class="audio" @click="handlePlayAudioMessage" :style="'width: ' + 120 + 'rpx'">{{ '" ' + message.payload.second }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audio: {},
    };
  },

  components: {},
  props: {
    message: {
      type: Object,
      default: () => {},
    },
    isMine: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    message: {
      handler: function (newVal) {
        this.setData({
          message: newVal,
        });
      },
      immediate: true,
      deep: true,
    },
  },

  beforeMount() {
    this.audio = uni.createInnerAudioContext();
    this.audio.onPlay(() => {
      console.log('开始播放');
    });
    this.audio.onEnded(() => {
      console.log('停止播放');
    });
    this.audio.onError(e => {
      console.error(e, 'onError');
      // ios 音频播放无声，可能是因为系统开启了静音模式
      uni.showToast({
        icon: 'none',
        title: '该音频暂不支持播放',
      });
    });
  },

  methods: {
    handlePlayAudioMessage() {
      this.audio.src = this.message.payload.url;
      console.error(this.message.payload.second, 'handlePlayAudioMessage');
      this.audio.play();
    },
  },
};
</script>
<style>
@import './index.css';
</style>
